<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="btn">点击</button>
    <div id="box">点击按钮出时间</div>
    <p>不点也能获取</p>
    <div id="box1"></div>
    <script>
        // 1.改变元素内容innerText,不识别html标签
        var btn = document.querySelector('#btn');
        btn.onclick = function() {
            var box = document.querySelector('#box');
            // 改变内容
            box.innerText = getTime();
        }
        // 不要点击刷新直接得到时间
        var p = document.querySelector('p');
        p.innerText = getTime();


        function getTime() {
            var date1 = new Date();
            var date2 = date1.getFullYear() + '年' + (date1.getMonth() + 1) + '月' + date1.getDate() + '日' + date1.getHours() + '时' + date1.getMinutes() + '分' + date1.getSeconds() + '秒' + ' 星期' + date1.getDay();
            return date2;
        }

        // 2.innerHtml识别html标签
        var box1 = document.querySelector('#box1');
        // box1.innerText = '<strong>加粗文字</strong>'; // 不好使，不识别
        box1.innerHTML = '<strong>加粗文字</strong>';

        // 两种操作元素的方法都可以获得元素内容和修改元素


        // 
    </script>
</body>
</html>